<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>小兔鲜</title>

  <link rel="stylesheet" href="../public/font/iconfont.css" />
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/shop.css" />
  <link rel="shortcut icon" href="../public/favicon.ico">
</head>

<body>
  <div class="wrap">
    <div class="header">
      <!-- 顶部导航 -->
      <div class="topnav">
        <!-- 版心盒子 -->
        <div class="topnav_content">
          <!-- 放置顶部导航的盒子 -->
          <div class="topnav_right">
            <ul>
              <li>
                <a href="javascript:;">请先登录</a>
              </li>
              <li>
                <a href="javascript:;">免费注册</a>
              </li>
              <li>
                <a href="javascript:;">我的订单</a>
              </li>
              <li>
                <a href="javascript:;">会员中心</a>
              </li>
              <li>
                <a href="javascript:;">帮助中心</a>
              </li>
              <li>
                <a href="javascript:;">关于我们</a>
              </li>
              <li>
                <a href="javascript:;">
                  <span class="toutiao">&#xe60a; </span>手机版</a>
              </li>
            </ul>
          </div>
        </div>

        <!-- 顶部导航结束 -->
        <!-- 导航栏 -->
      </div>
      <!-- 顶部导航结束 -->
      <!-- 导航栏 -->
      <div class="block-nav">
        <div class="nav w">
          <!-- 版心盒子 -->
          <div class="nav-content w">
            <!-- 放置logo的盒子 -->
            <div class="nav-left">
              <h1>
                <a href="">logo</a>
              </h1>
            </div>
            <!-- 中间导航部分 -->
            <div class="nav-center">
              <ul>
                <li>
                  <a href="javascript:;">首页</a>
                </li>
                <li>
                  <a href="javascript:;">居家</a>
                </li>
                <li>
                  <a href="javascript:;">美食</a>
                </li>
                <li>
                  <a href="javascript:;">服饰</a>
                </li>
                <li>
                  <a href="javascript:;">母婴</a>
                </li>
                <li>
                  <a href="javascript:;">个护</a>
                </li>
                <li>
                  <a href="javascript:;">严选</a>
                </li>
                <li>
                  <a href="javascript:;">数码</a>
                </li>
                <li>
                  <a href="javascript:;">运动</a>
                </li>
                <li>
                  <a href="javascript:;">杂项</a>
                </li>
              </ul>
            </div>
            <!-- 右边导航部分 -->
            <div class="nav-right">
              <span class="toutiao">&#xe63b; </span>
              <input type="text" placeholder="搜一搜" />
              <div id="none-shop">
                <span class="toutiao" id="gouwuche">&#xe649; </span>
                <i id="count">0</i>
                <!-- 隐藏购物车盒子 -->
                <div class="none-shop active">
                  <div class="tri">
                    <div class="trangle"></div>
                    <div class="trangle1"></div>
                  </div>
                  <div class="top">
                    <ul>
                      <!--  <li>
                          <div class="pho">
                            <img src="./public/produceImgs/D1.jpg" alt="" />
                          </div>
                          <div class="text">
                            <span id="title">麦瑞克家用轻音智能多功能彩屏跑步机S450</span
                            >
                            <span id="dec">规格：多功能 款式：蓝屏</span>
                          </div>
                          <div id="count-right">
                            <span id="price">￥2303.00</span>
                            <span>x1</span>
                          </div>
                          <div id="close">
                            <span class="toutiao" id="toutiao-close">&#xe604;</span>
                          </div>
                        </li> -->
                    </ul>
                  </div>
                  <div id="bottom">
                    <div class="total">
                      <span class="title">共1件商品</span>
                      <span class="price">￥2303.00</span>
                    </div>
                    <div class="input">
                      <button id="input">去购物车结算</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 隐藏导航栏 -->
      <div class="none-nav active">
        <div class="nav w">
          <!-- 版心盒子 -->
          <div class="nav-content w">
            <!-- 放置logo的盒子 -->
            <div class="nav-left">
              <h1>
                <a href="">logo</a>
              </h1>
            </div>
            <!-- 中间导航部分 -->
            <div class="nav-center">
              <ul>
                <li>
                  <a href="javascript:;">首页</a>
                </li>
                <li>
                  <a href="javascript:;">居家</a>
                </li>
                <li>
                  <a href="javascript:;">美食</a>
                </li>
                <li>
                  <a href="javascript:;">服饰</a>
                </li>
                <li>
                  <a href="javascript:;">母婴</a>
                </li>
                <li>
                  <a href="javascript:;">个护</a>
                </li>
                <li>
                  <a href="javascript:;">严选</a>
                </li>
                <li>
                  <a href="javascript:;">数码</a>
                </li>
                <li>
                  <a href="javascript:;">运动</a>
                </li>
                <li>
                  <a href="javascript:;">杂项</a>
                </li>
              </ul>
            </div>
            <!-- 右边导航部分 -->
            <div class="none-right">
              <!-- <span class="toutiao">&#xe63b; </span>
              <input type="text" placeholder="搜一搜" />
              <span class="toutiao" id="gouwuche">&#xe649; </span>
              <i id="count"></i> -->
              <ul>
                <li>
                  <a href="javascript:;" id="brand" class="brand">品牌</a>
                </li>
                <li>
                  <a href="javascript:;" id="theme" class="theme">专题</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- <div class="dialog">
      删除成功
    </div> -->
    <div class="shop">
      <div class="shop_header">
        <span>首页 <i class="icon toutiao icon-xiangyoujiantou"></i></span>
        <span>购物车</span>
      </div>
      <div class="shop_content">
        <div class="shop_con_header">
          <div class="checkAll">
            <div class="checkAllbox">
              <i class="cAll icon toutiao icon-duoxuanweixuanzhong_o"></i><span>全选</span>
            </div>
          </div>
          <div class="good">商品信息</div>
          <div class="pri">单价</div>
          <div class="num">数量</div>
          <div class="toa">小计</div>
          <div class="opera">操作</div>
        </div>
        <div class="shop_con_body">
          <!-- <div class="shop_item">
            <div class="checkbox">
              <i class="icon toutiao icon-duoxuanweixuanzhong_o"></i>
            </div>
            <div class="goods">
              <dl>
                <dt>
                  <img src="../public/produceImgs/shop_1.jpg" alt="" />
                </dt>
                <dd>
                  <p>休闲潮流男士胸包</p>
                  <p>颜色:深黛蓝</p>
                </dd>
              </dl>
            </div>
            <div class="price">
              <i></i>
              <span>¥136.00</span>
            </div>
            <div class="num1">
              <div class="numbox">
                <a href="#" class="sub">-</a>
                <input type="text" />
                <a href="#" class="add">+</a>
              </div>
            </div>

            <div class="total">
              <span>¥272.00</span>
            </div>
            <div class="ope">
              <p><a href="#">移入收藏夹</a></p>
              <p class="del"><a href="#">删除</a></p>
              <p><a href="#">找相似</a></p>
            </div>
          </div> -->
          <!-- <div class="nogood">
            <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/none.5c042de4.png" alt="">
            <p>购物车内暂时没有商品</p>
            <div class="nogood_btn">
              继续逛逛
            </div>
          </div> -->
        </div>
      </div>
      <!-- 20 -->
      <div class="shop_footer">
        <div class="footerbox">
          <span class="count">共3件有效商品,已选择3件</span>
          <span class="sum">商品合计: <i>￥375.00</i></span>
          <span class="order">下单结算</span>
        </div>
      </div>
    </div>

    <!-- 尾部开始 -->
    <div class="footer">
      <div class="footerContent">
        <ul class="footerBox">
          <li>
            <p>客户服务</p>
            <div class="tubiao">
              <div class="iconBox">
                <i class="iconfont">&#xe661;</i>
                <p>在线客服</p>
              </div>
              <div class="iconBox">
                <i class="iconfont">&#xe600;</i>
                <p>问题反馈</p>
              </div>
            </div>
          </li>

          <li>
            <p>关注我们</p>
            <div class="tubiao">
              <div class="iconBox">
                <i class="iconfont">&#xe65c;</i>
                <p>公众号</p>
              </div>
              <div class="iconBox">
                <i class="iconfont">&#xe65d;</i>
                <p>微博</p>
              </div>
            </div>
          </li>

          <li class="download">
            <p>下载APP</p>
            <div class="title">
              <div>
                <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg" alt="" />
              </div>
              <div>
                <span>扫描二维码</span>
                <span>立马下载APP</span>
                <a href="#">下载页面</a>
              </div>
            </div>
          </li>

          <li class="fuwu">
            <p>服务热线</p>
            <div>
              <span> 400-0000-000 </span>
              <span>周一至周日 8:00-18:00</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 尾部结束 -->
    <!-- 底部开始 -->
    <div class="bottom">
      <div class="content">
        <div class="character">
          <a href="javascript:;">
            <i class="iconfont">&#xe6e5;</i>
            <span>价格亲民</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont">&#xe60e;</i>
            <span>物流快捷</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont">&#xe665;</i>
            <span>品质新鲜</span>
          </a>
        </div>
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight © 小兔鲜儿</p>
        </div>
      </div>
    </div>
    <!-- 底部结束 -->
  </div>

  </div>
  <!-- 引入弹框插件 -->
  <script src="../js/dialog.js"></script>

  <script src="../js/shopData.js"></script>
  <script src="../js/shopCar.js"></script>
  <script src="../js/common.js"></script>
  <script src="../js/topRegisters.js"></script>
  <script src="../js/goto.js"></script>
</body>

</html>